<template>
	<div class="classify">
		<van-nav-bar :title="LoadData.name" fixed left-arrow @click-left="back" />

		<div class="nav-content">
			<van-tabs v-model="active" sticky swipeable animated @change="changetab">
				<van-tab v-for="(item,index) in list" :title="item.name" :key="index">
					<router-view @showinfo="showinfo" v-if="index == active"></router-view>
				</van-tab>
				
			</van-tabs>


		</div>
		<van-overlay :show="show" @click="show = false" :z-index="100">
			<div class="wrapper">
				<div class="block">
					<div class="container">
						<div class="headimg">
							<img :src="showData.avatar_text" alt="">
						</div>
						<div class="info">
							<p>姓名：{{showData.name}}</p>
							<p>年龄：{{showData.age}}</p>
							<p>民族：{{showData.nation}}</p>
							<p>政治面貌：{{showData.politic_text}}</p>
						</div>
					</div>
					<div class="middle-title">资料介绍</div>
					<div class="detail">{{showData.introduction}}</div>
				</div>
			</div>
		</van-overlay>

	</div>
</template>

<script>
	export default {
		name: "Classify",
		components: {},
		data() {
			return {
				title: "",
				show: false,
				src: '',
				active: "0",
				LoadData:{},
				list: [],
				way:"",
				nextPageData:{},
				showData:{}
			}
		},
		mounted() {
			this.LoadData = this.$localStorage.get('firstLevel')
			if(this.LoadData.special == 1){
				this.list = [{
					name:"专题"
				}]
				this.way = 3
				this.getPath()
			}else{
				this.getList()
			}
			
		},
		methods: {
			//获取二级分类
			getList(){
				this.$api.home.nav({type:this.$localStorage.get("siteType"),pid:this.LoadData.id}).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.list = res.data
						this.way = res.data[0].way
						this.nextPageData = res.data[0]
						this.getPath()
					}
				
				})
			},
			back() {
				this.$router.push({
					path: "/"
				})
			},
			
			showinfo(item, val) {
				this.show = val
				this.showData = item
			},
			changetab() {
				let that = this
				this.list.forEach((item,index)=>{
					if(that.active == index){
						that.way = item.way
						that.nextPageData = item
						that.getPath()
					}
				})
			},
			getPath(){
				this.$localStorage.set('secondLevel', this.nextPageData)
				if (this.way == 1) { //详情
					this.$router.push({
						path: '/classify/detail'
					})
				} else if (this.way == 3) { //文章列表
					this.$router.push({
						path: '/classify/datalist'
					})
				} else if (this.way == 17) { //留言
					this.$router.push({
						path: '/classify/message'
					})
				} else if (this.way == 6) { //举报
					this.$router.push({
						path: '/classify/report'
					})
				} else if (this.way == 5) { //服务
					this.$router.push({
						path: '/classify/servenotice'
					})
				} else if (this.way == 14) { //投票
					this.$router.push({
						path: '/classify/vote'
					})
				} else if (this.way == 23) { //活动
					this.$router.push({
						path: '/classify/vote'
					})
				}
				else if (this.way == 15) { //评议
					this.$router.push({
						path: '/classify/deliberate'
					})
				} 
				else if (this.way == 16) { //评议
					this.$router.push({
						path: '/classify/solicitation'
					})
				}
				else if (this.way == 10) { //问问列表
					this.$router.push({
						path: '/classify/asklist'
					})
				}else if (this.way == 11) { //热门问题
					this.$router.push({
						path: '/classify/asklist?hot=1'
					})
				}else if (this.way == 13) { //待回答问题
					this.$router.push({
						path: '/classify/asklist?answered=1'
					})
				}else if (this.way == 12) { //提出问题
					this.$router.push({
						path: '/classify/asking'
					})
				}
				else { //空
					this.$router.push({
						path: '/classify/'
					})
				}
			}
		}


	}
</script>

<style lang="less">
	.classify {
		padding-top: 46px;

		.van-nav-bar {
			.van-icon {
				color: #000;
			}

			.van-nav-bar__text {
				color: #5C5C5C;
			}
		}

		.nav-content {
			.van-tab {
				font-size: 0.88rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(87, 87, 87, 1);
			}

			.van-tab--active {
				font-size: 0.88rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(254, 119, 0, 1);
			}

			.van-tabs__line {
				width: 1.81rem !important;
				background-color: #FE7700 !important;
				height: 0.13rem !important;
				bottom: 1.4rem !important;
			}
		}


	}

	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.block {
			width: 19.63rem;
			min-height: 13.88rem;
			background: rgba(255, 255, 255, 1);
			border-radius: 0.5rem;
			padding: 1.34rem 1.91rem;
			margin-top: -6rem;

			.container {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.headimg {
					width: 4.75rem;
					height: 4.75rem;
					background: rgba(238, 238, 238, 1);
					border-radius: 0.2rem;
					overflow: hidden;
					margin-right: 1.13rem;

					img {
						width: 100%;
						object-fit: cover;

					}
				}

				.info {
					flex: 1;

					font-size: 0.81rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(35, 35, 35, 1);
				}
			}
			.middle-title{
				font-size:0.81rem;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(35,35,35,1);
				margin: 1.25rem 0 1rem 0;
			}
			.detail{
				font-size:0.81rem;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(108,108,108,1);
				line-height:1.13rem;
			}
		}
	}
</style>
